<template>
  <div class="app-container">
    <!-- <mainTilte title="商品基准价管理" /> -->
    <form-selections :is-active="isActive" :items="formItems" :query-param.sync="searchParams" display="block" @handleSearch="handleSearch" />
    <div class="select_flex">
      <div class="operation_button_box">
        <el-button v-action="'productPrice@examine'" size="small" type="success" @click="add">价格审核</el-button>
        <el-button v-action="'productPrice@export'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出价格</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </div>
    <div v-loading="loading" class="page-grid">

      <egrid
        class="egrid"
        stripe
        fit
        border
        highlight-current-row
        element-loading-text="正在努力加载中..."
        :column-type="['selection']"
        :data="tableData"
        :columns="columns"
        :columns-schema="columnsSchema"
        :screen-heigh="screenHeigh"
        @selection-change="checkIds"
      />
      <epagination v-if="tableData" :total="total" :current="searchParams.page" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
    </div>
    <el-dialog
      v-if="dialogExamineVisible"
      v-loading.lock="loading"
      v-loading="loading"
      title=""
      :visible.sync="dialogExamineVisible"
      :close-on-click-modal="false"
      width="90%"
      class="dialogText header-none"
      element-loading-text="正在加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      center
    >
      <el-form ref="examineForm" :model="examineForm" :rules="examineFormRule" label-width="120px">
        <el-row>
          <mainTilte title="商品信息" />
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="系统sku">
              <el-input v-model.trim="examineForm.code" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="中文名称">
              <el-input v-model.trim="examineForm.name_ch" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="英文名称">
              <el-input v-model="examineForm.name_en" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="尺寸(公制)">
              <div class="sizeStyle">
                <div>
                  <el-input v-model="examineForm.length" placeholder="长" disabled>
                    <template slot="append">CM</template>
                  </el-input>
                </div>
                <div style="margin-left: 8px">
                  <el-input v-model="examineForm.width" placeholder="宽" disabled>
                    <template slot="append">CM</template>
                  </el-input>
                </div>
                <div style="margin-left: 8px">
                  <el-input v-model="examineForm.height" placeholder="高" disabled>
                    <template slot="append">CM</template>
                  </el-input>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="尺寸(美制)">
              <div class="sizeStyle">
                <div>
                  <el-input v-model="examineForm.length_AS" placeholder="长" disabled>
                    <template slot="append">英寸</template>
                  </el-input>
                </div>
                <div style="margin-left: 8px">
                  <el-input v-model="examineForm.width_AS" placeholder="宽" disabled>
                    <template slot="append">英寸</template>
                  </el-input>
                </div>
                <div style="margin-left: 8px">
                  <el-input v-model="examineForm.height_AS" placeholder="高" disabled>
                    <template slot="append">英寸</template>
                  </el-input>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="毛重(公制)">
              <el-input v-model="examineForm.weight_gross" placeholder="请输入内容" disabled>
                <template slot="append">kg</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="毛重(美制)">
              <el-input v-model="examineForm.weight_gross_AS" placeholder="请输入内容" disabled>
                <template slot="append">lbs</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="净重(公制)">
              <el-input v-model="examineForm.weight" placeholder="请输入内容" disabled>
                <template slot="append">kg</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="净重(美制)">
              <el-input v-model="examineForm.weight_AS" placeholder="请输入内容" disabled>
                <template slot="append">lbs</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <mainTilte title="价格信息" />
        </el-row>
        <el-row>
          <!-- <el-col :span="8">
            <el-form-item label="采购价(RMB)">
              <el-input :value="examineForm.purchase_price_rmb | toThousandFilter" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购价(USD)">
              <el-input :value="examineForm.purchase_price_usd | toThousandFilter" disabled />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="海运费">
              <el-input :value="examineForm.ocean_freight | toThousandFilter" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关税税率">
              <el-input v-model.trim="examineForm.tariff_rate" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关税杂费税率">
              <el-input v-model.trim="examineForm.tariff_rate_extras" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="额外税税率">
              <el-input v-model.trim="examineForm.additional_tax_rate" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="原关税">
              <el-input :value="examineForm.original_tariff | toThousandFilter" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="额外增加关税">
              <el-input :value="examineForm.additional_tariff_increase | toThousandFilter" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总关税">
              <el-input :value="examineForm.all_tariff | toThousandFilter" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单操作费">
              <el-input :value="examineForm.order_operation_fee | toThousandFilter" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓储费">
              <el-input :value="examineForm.storage_fee | toThousandFilter" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递费">
              <el-input :value="examineForm.express_fee | toThousandFilter" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="小计">
              <el-input :value="examineForm.total | toThousandFilter" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="基准价系数">
              <el-input v-model.trim="examineForm.benchmark_price_coefficient" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="基准价">
              <el-input :value="examineForm.benchmark_price | toThousandFilter" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <mainTilte title="审核意见" />
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="">
              <el-radio-group v-model="examineForm.status">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="2">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="examineForm.status === 2" :span="16">
            <el-form-item label="驳回原因" prop="reason">
              <el-input v-model="examineForm.reason" type="textarea" autosize />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogExamineVisible = false">取消审核</el-button>
        <el-button type="primary" @click="saveExamineData()">确认审核</el-button>
      </span>
    </el-dialog>
    <!-- 导出 -->
    <down-modul :form-visible-down.sync="formVisibleDown" :url="downUrl" :search-param="searchParamObj" :options-modul="downOptions" />
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import list from '@/layout/mixin/list'
import dicValues from '@/components/dicTransform/index'
import codeItem from '@/components/base/code'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import appPrice from '@/components/base/appPrice'
// import { downloadxlsx } from '@/utils/index'
import cacheList from '@/layout/mixin/cacheList'
import DownModul from '@/components/DownModul/index'
export default {
  name: 'BenchmarkPriceManage',
  components: { DownModul },
  directives: {
    action
  },
  mixins: [formOperate, list, cacheList],
  data() {
    const DICTIONARIES = {
      // 审核状态，0-待审核 1-审核通过 2-审核驳回
      isableList: [
        {
          code: 0,
          name: '待核价'
        },
        {
          code: 1,
          name: '已核价'
        },
        {
          code: 2,
          name: '审核驳回'
        }
      ]
    }
    return {
      otherHeight: 355,
      downOptions: [
        { key: 'code', label: 'SKU(编码)' },
        { key: 'name_ch', label: '中文名' },
        { key: 'name_en', label: '英文名' },
        { key: 'length', label: '长（CM）' },
        { key: 'width', label: '宽（CM）' },
        { key: 'height', label: '高（CM）' },
        { key: 'volume', label: '体积' },
        { key: 'weight_gross', label: '毛重（KG）' },
        { key: 'weight', label: '净重（KG）' },
        { key: 'length_AS', label: '长(inch）' },
        { key: 'width_AS', label: '宽(inch）' },
        { key: 'height_AS', label: '高(inch）' },
        { key: 'weight_gross_AS', label: '毛重（LBS)' },
        { key: 'weight_AS', label: '净重（LBS)' },
        { key: 'volume_weight_AS', label: '体积重' },
        // { key: 'oversize', label: '计费重' },
        // { key: 'purchase_price_rmb', label: '采购价(RMB)' },
        // { key: 'purchase_price_usd', label: '采购价(USD)' },
        { key: 'purchase_benchmark_price', label: '采购基准价（USD)' },
        { key: 'ocean_freight', label: '海运费' },
        { key: 'tariff_rate', label: '关税税率' },
        { key: 'tariff_rate_extras', label: '关税杂费税率' },
        { key: 'additional_tax_rate', label: '额外税税率' },
        { key: 'original_tariff', label: '原关税' },
        { key: 'additional_tariff_increase', label: '额外增加关税' },
        { key: 'all_tariff', label: '总关税' },
        { key: 'order_operation_fee', label: '订单操作费' },
        { key: 'storage_fee', label: '仓储费' },
        { key: 'express_fee', label: '快递费' },
        { key: 'total', label: '合计' },
        { key: 'benchmark_price_coefficient', label: '基准价系数' },
        { key: 'benchmark_price', label: '基准价' },
        { key: 'purchase_status', label: '核价状态' }
      ],
      downUrl: '/productPrice/export',
      formVisibleDown: false,
      /** *
       * 定义搜索框
       */
      componentName: 'BenchmarkPriceManage',
      searchParams: {
        page: 1,
        limit: 10, // 默认是10
        totalRows: 0,
        type: '',
        value: '',
        status: 0,
        name_ch: '',
        name_en: '',
        code: ''
      },
      formItems: [
        {
          label: '中文名称',
          key: 'name_ch',
          type: 'input',
          placeholder: '请输入中文名称'
        },
        {
          label: '英文名称',
          key: 'name_en',
          type: 'input',
          placeholder: '请输入英文名称'
        },
        {
          label: '编码',
          key: 'code',
          type: 'input',
          placeholder: '请输入编码'
        },
        {
          label: '审核状态',
          key: 'status',
          type: 'select',
          options: [
            {
              label: '待核价',
              value: 0
            },
            {
              label: '已核价',
              value: 1
            },
            {
              label: '审核驳回',
              value: 2
            }
          ]
        }
      ],
      searchTypeList: [
        {
          code: 'name_ch',
          name: '中文名称'
        },
        {
          code: 'name_en',
          name: '英文名称'
        },
        {
          code: 'code',
          name: '编码'
        }
      ],
      issignContract: [
        {
          code: 0,
          name: '待核价'
        },
        {
          code: 1,
          name: '已核价'
        },
        {
          code: 2,
          name: '审核驳回'
        }
      ],
      columns: [
        {
          label: '核价状态',
          prop: 'status',
          width: '112',
          align: 'center',
          tooltip: false
        },
        // {
        //   label: '审核原因',
        //   prop: 'reason',
        //   width: '200',
        //   align: 'center',
        //   tooltip: false,
        //   component: appText,
        //   propsHandler({ row }) {
        //     return { text: row.reason }
        //   }
        // },
        {
          label: '编码',
          prop: 'code',
          width: '240',
          align: 'center',
          tooltip: false,
          component: codeItem,
          propsHandler: function({ row, col, column }) {
            return {
              code: row.code ? row.code : '',
              routePath: '/product/benchmarkPriceManage/priceDetail',
              queryData: { row: JSON.stringify(row) }
            }
          }
        },
        {
          label: '中文名称',
          prop: 'name_ch',
          width: '220',
          align: 'center',
          tooltip: false
        },
        {
          label: '英文名称',
          prop: 'name_en',
          width: '200',
          align: 'center',
          tooltip: false
        },
        // {
        //   label: '采购价(RMB)',
        //   prop: 'purchase_price_rmb',
        //   width: '112',
        //   align: 'center',
        //   tooltip: false,
        //   component: appPrice,
        //   propsHandler({ row }) {
        //     return { price: row.purchase_price_rmb }
        //   }
        // },
        // {
        //   label: '采购价(USD)',
        //   prop: 'purchase_price_usd',
        //   width: '112',
        //   align: 'center',
        //   tooltip: false,
        //   component: appPrice,
        //   propsHandler({ row }) {
        //     return { price: row.purchase_price_usd }
        //   }
        // },
        {
          label: '采购价基准价',
          prop: 'purchase_benchmark_price',
          width: '112',
          align: 'center',
          tooltip: false,
          component: appPrice,
          propsHandler({ row }) {
            return { price: row.purchase_benchmark_price }
          }
        },
        {
          label: '海运费',
          prop: 'ocean_freight',
          width: '112',
          align: 'center',
          tooltip: false
        },
        // {
        //   label: '关税杂费税率(%)',
        //   prop: 'tariff_rate_extras',
        //   width: '200',
        //   align: 'center',
        //   tooltip: false
        // },
        // {
        //   label: '原关税',
        //   prop: 'original_tariff',
        //   width: '200',
        //   align: 'center',
        //   tooltip: false
        // },
        // {
        //   label: '额外增加关税',
        //   prop: 'additional_tariff_increase',
        //   width: '200',
        //   align: 'center',
        //   tooltip: false
        // },
        {
          label: '总关税',
          prop: 'all_tariff',
          width: '112',
          align: 'center',
          tooltip: false
        },
        {
          label: '订单操作费',
          prop: 'order_operation_fee',
          width: '112',
          align: 'center',
          tooltip: false
        },
        {
          label: '仓储费',
          prop: 'storage_fee',
          width: '112',
          align: 'center',
          tooltip: false
        },
        {
          label: '快递费',
          prop: 'express_fee',
          width: '112',
          align: 'center',
          tooltip: false
        },
        {
          label: '合计',
          prop: 'total',
          width: '112',
          align: 'center',
          tooltip: false
        },
        // {
        //   label: '基准价系数',
        //   prop: 'benchmark_price_coefficient',
        //   width: '200',
        //   align: 'center',
        //   tooltip: false
        // },
        {
          label: '基准价',
          prop: 'benchmark_price',
          width: '112',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建人',
          prop: 'creator_name',
          width: '112',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建时间',
          prop: 'created_at',
          width: '174',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改人',
          prop: 'update_name',
          width: '112',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改时间',
          prop: 'updated_at',
          width: '174',
          align: 'center',
          tooltip: false
        }
      ],
      columnsSchema: {
        核价状态: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['isableList'],
              code: row[col.prop]
            }
          },
          component: dicValues
        }
      },
      dialogExamineVisible: false,
      examineForm: {
        value: '',
        status: 1,
        reason: ''
      },
      examineFormRule: {
        reason: [
          { required: true, message: '请输入驳回原因', trigger: 'blur' },
          { max: 500, message: '驳回原因必须是500个字符以内', trigger: 'blur' }
        ]
      },
      exportLoading: false,
      cachePaths: [
        '/product/benchmarkPriceManage/priceDetail'
      ]
    }
  },
  computed: {
    searchParamObj({ searchTypeList }) {
      const vm = this
      const item = searchTypeList.find((e) => e.code === vm.searchParams.type)
      const params = {}
      if (item) {
        params[item.code] = vm.searchParams.value
      }
      params['status'] = vm.searchParams.status
      return params
    }
  },
  created() {
    // 调用全局混合方法 第一个参数是请求地址对应的名称（api.js），第二个为参数
    this.getList()
  },
  activated() {
    this.getList()
  },
  methods: {
    handleExport() {
      const vm = this
      vm.formVisibleDown = true
      //   vm.exportLoading = true
      //   const url = '/productPrice/export'
      //   const { value, status } = vm.searchParams
      //   const params = {
      //     keys: value,
      //     status
      //   }
      //   vm.$http.post(url, params).then(res => {
      //     downloadxlsx(res.data)
      //     vm.exportLoading = false
      //   }).catch(() => {
      //     vm.exportLoading = false
      //   })
    },

    handleSearch() {
      const vm = this
      vm.searchParams.page = 1
      vm.getList()
    },
    handleRefresh() {
      const vm = this
      vm.searchParams.page = 1
      vm.searchParams.limit = 10
      vm.searchParams.value = ''
      vm.searchParams.status = ''
      vm.searchParams.type = ''
      vm.searchParams.name_ch = ''
      vm.searchParams.name_en = ''
      vm.searchParams.code = ''
      vm.getList()
    },
    // 点击搜索
    query() {
      this.getList()
    },
    // 价格审核
    add() {
      const dataLength = this.checkedList.length
      if (dataLength === 0 || dataLength > 1) {
        this.$message.error('请至多选择一条数据')
        return false
      }
      if (this.checkedList[0].status === 1) {
        return this.$message.error('请选择待核价的数据')
      }
      this.getProductDetails(this.checkedList[0].product_id)
      this.dialogExamineVisible = true
    },
    async getProductDetails(id) {
      await this.$http
        .get(`/product/${id}`)
        .then((res) => {
          if (res.code === 10000 && res.data.packData) {
            const newArr = JSON.parse(JSON.stringify(this.checkedList[0]))
            this.examineForm = Object.assign(newArr, res.data.packData)
            this.examineForm.reason = ''
            this.examineForm.status = 1
            console.log(this.checkedList[0], 'this.checkedList[0]>>>>>')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 审核保存
    saveExamineData() {
      const vm = this
      vm.$refs.examineForm.validate(valid => {
        if (valid) {
          const param = {
            status: vm.examineForm.status,
            reason: vm.examineForm.reason
          }
          vm.$http
            .put(`/productPrice/examine/${vm.checkedList[0].id}`, param)
            .then((res) => {
              if (res.code === 10000) {
                vm.$message.success('审核成功')
                vm.getList()
              }
            })
            .catch((err) => {
              console.log(err)
            })
          vm.dialogExamineVisible = false
        }
      })
    },
    handleSizeChange(val) {
      this.searchParams.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.searchParams.page = val
      this.getList()
    },
    getList() {
      const { page, limit, type, value, status, name_ch, name_en, code } = this.searchParams
      const arr = [
        { key: 'page', value: page },
        { key: 'limit', value: limit },
        { key: 'status', value: status },
        { key: 'name_ch', value: name_ch },
        { key: 'name_en', value: name_en },
        { key: 'code', value: code }
      ]
      if (type) {
        arr.push({
          key: type,
          value: value
        })
      }
      const params = []
      arr.forEach((e) => {
        if (e.value !== '') {
          params.push(`${e.key}=${e.value}`)
        }
      })

      this.initTableData(`/productPrice?${params.join('&')}`)
    }
  }
}
</script>

<style scoped>
.addExpense {
  padding: 15px;
  background: #fff;
}
.sizeStyle {
  display: flex;
}
.sizeStyle /deep/ .el-input__inner {
  border-right: 0;
}
.sizeStyle /deep/ .el-input-group__append {
  padding-left: 4px;
  padding-right: 4px;
  font-size: 14px;
  color: #333333;
  background: #fff;
}
</style>
